How can I highlight clicked menu item?

Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:

CSS:

Expand|Select|Wrap|Line Numbers

 #navlist {

    font-family:Arial, Helvetica, sans-serif;

    font-size:.8em;

    font-weight:bold;

    list-style:none;

}

#navlist a {

    display:block;

    width:155px;

    color:#fff;

    text-decoration:none;

    background:url(../images/tab.gif) no-repeat;

    padding-top: 7px;

    padding-right: 4px;

    padding-bottom: 6px;

    padding-left: 10px;

}

#navlist a:hover { 

    background-position:0 -29px;

    color: #1e5ebd;

}

#navlist a:active {

    background-position:0 -58px;

    color:#1e5ebd;

}

HTML:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test Page</title>
 
<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
 
<script>

function changeFlash(url){

var d=document;

(d.all)? d.all("flashMov1").movie = url :

d.embeds["flashMov2"].src = url;

}

</script>
 
</head>
 
<body>
 
    <!-- Tour Box Begins Here -->
 
    <div id="box">
 
        <div id="titleBar"></div>
 
        <div id="content">
 
            <div id="menu">
 
                <ul id="navlist">

                    <li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>

                    <li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>

                    <li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>

                </ul>
 
            </div>
 
            <div id="videoDisplay">

                  <object id=flashMov1

                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"

                    width="233" height="156">

                    <param name="movie" value="sb-main.swf" />

                    <param name="quality" value="high" />

                    <param name="SCALE" value="exactfit" />

                    <embed src="sb-main.swf"

                    width="233" height="156" name=flashMov2 quality=high

                    type="application/x-shockwave-flash"

                    pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>

                  </object>

            </div>
 
        </div>
 
    </div>
 
    <!-- Tour Box Ends Here -->
 
</body>
 
</html>

Jan 27 '10 #1

Subscribe Post Reply

4118

larztheloser

1) Give each of your menu items a unique CSS id
2) In the function changeFlash, make it so it sets the background to another value for the correct layer.

Jan 27 '10 #2

mojobullfrog

Thanks Larz. I think this solution might do the trick.

Jan 28 '10 #3

mojobullfrog

Here's a follow-up, with a twist:

What if I wanted to replicate the function of the first menu item, with a flash button? - that is, when the flash button is clicked, it loads the first flash movie and also highlights the first menu item. I can easily do the first part using the following AS2 code attached to the button:

Expand|Select|Wrap|Line Numbers

 on (release, keyPress "<Enter>") {

        url = "f1.swf";

        getURL("javascript:changeFlash('" + url + "');");

}

But I'm not too sure how to do something similar to highlight the first menu item though. Assume this is the method I'm using:

Expand|Select|Wrap|Line Numbers

 <html>

<head>
 
<script>

function changeFlash(url){

    var d=document;

    if (d.all) d.all("flashMov1").movie = url;

    else      d.embeds["flashMov2"].src = url;

}

</script>
 
<script type="text/javascript">
 
function highlightLinks(obj) {

   var linkList = document.getElementById("rollover").getElementsByTagName("a");

   for (i = 0; i < linkList.length; i++) {

      linkList[i].className = "";

   }

   obj.className = "selected";

}
 
</script>
 
</head>
 
<body>
 
<div id="rollover">

<a href="javascript: changeFlash('f1.swf')" onclick="highlightLinks(this)" class=""></a>

<a href="javascript: changeFlash('f2.swf')" onclick="highlightLinks(this)" class=""></a>

<a href="javascript: changeFlash('f3.swf')" onclick="highlightLinks(this)" class=""></a>

</div>
 
</body>
 
</html>

Jan 28 '10 #4

larztheloser

Shouldn't that be posted under "flash"?

Jan 28 '10 #5

Similar topics

highlight a menu item in frameset?

by: cpliu | last post by:

I have a page with 3 frames. The left one is the navigation, the top one is the graphic and title, the lower-right one is the content area. I'm wondering if it's possible to add a highlight to...

HTML / CSS

Help File: Empty Screen Or Menu Item

by: Tim Marshall | last post by:

I'm putting together my first help file (using Easy Help, http://www.easyhelp.com/). So far, so good. I'm able to use the Help File and Help Context ID to have things from my help file pop up...

Microsoft Access / VBA

Setting focus to menu item

by: Mark Smith | last post by:

Hello, I have an application where the user once they have pushed a certain button and completed a function want the focus set to a menutem, as this is always the next thing they do. Is it...

C# / C Sharp

How highlight menu item?

by: Woody Splawn | last post by:

We have a Winform with Menu items across the top. There are a number of menu items all horizontal across the top. When an item is selected things change in the bottom part of the screen. It would...

Visual Basic .NET

Determining which Menu Item is Clicked

by: Elliot | last post by:

The code creates two menu items at runtime and I want to be know which menu item was clicked in the Menuitems_Click procedure. Sender.Gettype.Name returns the value "MenuItem" only. Any help is...

Visual Basic .NET

Problem re-enabling menu item

by: johndevlon | last post by:

Hi, Can someone please help me. I've got a strang problem in Visual Studio 2005 I've created a windows application, using an MDI form and top menu. When a menu item is clicked, a new instance...

Visual Basic .NET

Get notification of user clicking on menu item

by: Nathan Baker | last post by:

Hey all, I've had to dive down into unmanaged world from .NET recently to subclass the IE browser window for the purposes of adding menu items. I've gotten the items added thanks to the Win32...

C# / C Sharp

How to get the text of a menu item that's clicked.

by: abhisoni | last post by:

Hi, i m hooking the messages that come whenever any menu item is clicked. This is done on a global scale i.e. it handles all the msgs generated for any appln. Now i 've to do this thing...

C / C++

How to highlight child menu?

by: nomad | last post by:

Hi, I have the menu below. I was wondering if it was possible to highlight the selected child menu item when the user hovers over it? <span id="MainMenuHolder" onmenuitemclick="OnClick"...

ASP.NET

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp